﻿    <BSCarousel NumberOfItems="@items.Count">
        <BSCarouselIndicators NumberOfItems="@items.Count" />
        <div class="carousel-inner">
            @for (int i = 0; i < items.Count; i++)
            {
                <BSCarouselItem src="@items[i].Source" alt="@items[i].Alt" ActionLink="@items[i].ActionLink" ActionLinkTarget="@items[i].ActionLinkTarget" />
            }
        </div>
        <BSCarouselControl CarouselDirection="CarouselDirection.Previous" NumberOfItems="@items.Count" />
        <BSCarouselControl CarouselDirection="CarouselDirection.Next" NumberOfItems="@items.Count" />
    </BSCarousel>

@code {
    int i = 0;
    IList<Item>
    items = new List<Item>
        {
            new Item {
                Source = "...First Slide",
                Alt ="First Slide",
                Caption = "Slide 1",
                Header = "Slide 1 Header",
                ActionLink = "https://chanan.github.io/BlazorStrap/",
                ActionLinkTarget = "_blank"
            },
            new Item {
                Source = "...Second Slide",
                Alt ="Second Slide",
                Caption = "Slide 2",
                Header = "Slide 2 Header",
                ActionLink = "https://chanan.github.io/BlazorStrap/",
                ActionLinkTarget = "_blank"
            },
            new Item {
                Source = "...Third Slide",
                Alt ="Third Slide",
                Caption = "Slide 3",
                Header = "Slide 3 Header",
                ActionLink = "https://chanan.github.io/BlazorStrap/",
                ActionLinkTarget = "_blank"
            }
        };

        class Item
        {
            public string Source { get; set; }
            public string Alt { get; set; }
            public string Caption { get; set; }
            public string Header { get; set; }
            public string ActionLink { get; set; }
            public string ActionLinkTarget { get; set; }
        }
  }
